@use "design-system";

.multichain-asset-picker__network-modal {
  .mm-modal-content__dialog {
    overflow: hidden;
  }

  .multichain-asset-picker__network-list {
    overflow-y: auto;
  }
}

.asset-picker-modal {
  $self: &;

  &__search-list {
    max-width: 100%;
    overflow: auto;
    max-height: 200px;

    &:hover {
      border-color: var(--color-primary-default);
    }
  }

  &__autodetect {
    vertical-align: unset;
  }

  .multichain-asset-picker-list-item {
    position: relative;
    cursor: pointer;
    overflow-y: auto;
    max-height: 50vh;
    white-space: nowrap;

    &:not(.multichain-asset-picker-list-item--selected) {
      &:hover,
      &:focus-within {
        background: var(--color-background-default-hover);
      }
    }

    @mixin disabled-token {
      .multichain-token-list-item a {
        cursor: not-allowed;
        @content;
      }
    }

    &--disabled,
    &:disabled {
      opacity: var(--opacity-disabled);
      cursor: not-allowed;
    }

    &__selected-indicator {
      width: 4px;
      height: calc(100% - 8px);
      position: absolute;
      top: 4px;
      left: 4px;
    }
  }

  .tokens-main-view-modal {
    max-height: 100%;
  }

  .network-picker {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 4px;
    padding-left: 16px;

    button: {
      background: var(--color-background-alternative);
    }
  }

  .modal-tab {
    &__main-view {
      max-height: 100%;
      background: var(--color-background-default);
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }

    &__wrapper {
      max-height: 100%;
      overflow-y: scroll;
    }

    &__loading {
      display: flex;
      height: 200px;
      align-items: center;
      justify-content: center;
      padding: 15px;
    }

    &__fetching {
      display: flex;
      height: 100px;
      align-items: center;
      justify-content: center;
      padding: 15px;
    }
  }
}
